<template>
    <div class="others">
        <div class="hot_box">
          <div class="hot_l">
            <span class="iconfont">&#xe611;</span>
            定位失败
          </div>
          <div class="hot_r">
            <span class="iconfont">&#xe689;</span>
            必游榜单
          </div>

        </div>
        <div class="devider"></div>
        <div class="week_hot">
          <div class="week_t">
              <div class="week_left">
                <span class="iconfont">&#xe64d;</span>
                本周热门榜单
              </div>
              <div class="week_right">
                全部榜单
                <span class="iconfont">&#xe633;</span>
              </div>
          </div>
          <div class="week_b">
            <ul class="list">
              <li v-for="(item,index) in weekUrl" :key="item.id">
                <img :src="item.img"  class="img_one">
                <img :src="item.imgUrl" class="img_two">
                <p class="one">{{item.text}}</p>
                <p class="two"><span>￥{{item.price}}</span>起</p>
              </li>

            </ul>

          </div>
        </div>
        <div class="devider"></div>
        <div class="guess_like" >
          <div class="guess_t">
              <span class="iconfont">&#xe63b;</span>
              <span class="guess_t-text">猜你喜欢</span>
          </div>
          <router-link
            class="guess_b"
            v-for="(item,index) in guessList"
            :key="item.id"
            :to="'/detail/'+item.id"
            tag="div"
          >
            <div class="guess_b_l">
              <div class="one">{{item.one}}</div>
              <img :src="item.imgUrl2" alt="" class="two">

            </div>
            <div class="guess_b_r">
              <p class="guess_name">
                {{item.name}}
              </p>
              <p class="guess_comment">
                <span class="iconfont">&#xe613;&#xe613;&#xe613;&#xe613;&#xe613;</span>
                <span class="guess_commentnum">{{item.comment}}条评论</span>
              </p>
              <div class="guess_price">
                <div class="price-left">
                  <span class="pub">￥<span class="num">{{item.price}}</span></span>

                  <span>起</span>
                </div>
                <span class="price-right">{{item.position}}</span>

              </div>
              <p class="guess_text" v-show="item.text.length>0">{{item.text}}</p>

            </div>

          </router-link>
        </div>

    </div>

</template>

<script>
    export default {
        name: "Other",
        data(){
          return{

          }
        },
        props:{
            weekUrl:Array,
            guessList:Array
        }



    }
</script>

<style lang="stylus" scoped>
  .hot_box{
    display:flex;
    border-bottom:1px solid #eaeaea;
    color:#212121;
    font-size:.14rem;
    .hot_l{
      border-right:1px solid #eaeaea;

    }
    div{
      width:50%;
      line-height:.5rem;
      text-align:center;
    }
  }
  .devider{
    width:100%;
    background:#eaeaea;
    height:.08rem;
  }


  .week_hot{
    .week_t{
      display:flex;
      justify-content:space-between;
      padding:.1rem;
      line-height:.3rem;
      .week_left{
        font-size:.16rem;
        span{
          font-size:.16rem;
          color:red;
        }
      }
      .week_right{
        font-size:.12rem;
        span{
          font-size:.12rem;
          color:#cacaca;
        }
      }
    }
    .week_b{
      overflow-x:scroll;
      white-space:nowrap;
      padding-bottom:.1rem;

      .list{
        padding-left:.1rem;
        li{
          display:inline-block;
          text-align:center;
          margin-right:.15rem;
          position:relative;
          .img_one{
            position:absolute;
            top:0;
            left:0;


            width:.5rem;
            height:.2rem;

          }
          .img_two{
            overflow:hidden;
            width:1rem;
            height:1rem;

          }
          .one{
            margin-top:.05rem;
          }
          .two{
            margin-top:.05rem;
            span{
              color:#ff8300;
            }
          }
        }
      }
    }

  }
  img[src=""],img:not([src]){

    opacity:0;

  }

  .guess_like{
    padding:.1rem 0 0 .1rem;
    .guess_t{

      .iconfont{
        color:red;
      }
      .guess_t_text{
        font-size:.1rem;

      }
    }
    .guess_b{
      margin:.1rem 0;
      border-bottom:1px solid #cacaca;
      padding-bottom:.1rem;
      display:flex;
      .guess_b_l{
        position:relative;
        .one{
          width:.5rem;
          height:.2rem;
          background:#ffb333;
          position:absolute;
          top:0;
          left:0;
          font-size:.12rem;
          line-height:.2rem;
          text-align:center;
          color:white;
          border-radius: 0 0 5px 0;
        }
        span{
          font-size:
        }
        .two{
          width:1rem;
          height:1rem;
        }
      }
      .guess_b_r{
        margin-left:.1rem;
        flex:1;
        .guess_name{
          font-size:.16rem;
          line-height:.22rem;
          margin-top:.1rem;
          color:#212121;
          height:.22rem;
        }
        .guess_comment{
          height:.17rem;
          margin-top:.07rem;
          .iconfont{
            color:#ffb436;

          }
          .guess_commentnum{
            font-size:.13rem;
          }

        }
        .guess_price{
          margin-top:.11rem;
          line-height:.2rem;
          display:flex;
          justify-content:space-between;
          .pub{
            font-size:.1rem;
            color:#ffb346;
          }
          .num{
            font-size:.2rem;
            color:#ffb346;
          }
          .price-right{
            padding-right:.1rem;
          }
        }
        .guess_text{

          margin-top:.1rem;
          padding: .04rem 0;
          color: #f55;
          font-size: .12rem;
          line-height: .17rem;
        }
      }



    }
  }
</style>
